<template>
  <div class="common-layout" style="background-color: ; height: 680px">
    <el-container
      style="background-color: ; height: 680px; position: relative; top: -50px"
    >
    
      <el-aside width="300px" style="background-color: ; height: 800px">
        <img
          src="../assets/logo1.png"
          alt=""
          style="
            width: 100px;
            height: 100px;
            position: relative;
            left: -100px;
            top: 20px;
          "
        />
        <el-col :span="12" style="width: 170px; position: relative; top: 150px">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            @open="handleOpen"
            @close="handleClose"
            unique-opened="true"
            style="width: 250px"
          >
            <el-menu-item index="1">
              <template #title>
                 <router-link to="/p1">
                <el-icon><odometer /></el-icon>
                
                <span>仪表盘</span></router-link>
              </template>
            </el-menu-item>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><grid /></el-icon>
                <span>常用设置</span>
              </template>
              <el-menu-item index="1-1"> <router-link to="/p1">教师管理</router-link></el-menu-item>
              <el-menu-item index="1-2">学生管理</el-menu-item>
              <el-menu-item index="1-3">公告管理</el-menu-item>
              <el-menu-item index="1-4">系统配置</el-menu-item>
              <el-menu-item index="1-5">判断服务器</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><help /></el-icon>
                <span>问题</span>
              </template>
              <el-menu-item index="1-1">问题列表</el-menu-item>
              <el-menu-item index="1-2">增加题目</el-menu-item>
              <el-menu-item index="1-3">导入导出题目</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><trophy /></el-icon>
                <span>比赛＆练习</span>
              </template>
              <el-menu-item index="1-1">比赛列表</el-menu-item>
              <el-menu-item index="1-2">创建比赛</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><collection /></el-icon>
                <span>课程</span>
              </template>
              <el-menu-item index="1-1">课程列表</el-menu-item>
              <el-menu-item index="1-2">创建课程</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-col>
      </el-aside>
      <el-container>
        <el-header style="background-color: #f9fafc">
          <div style="position: relative; left: 500px; top: px">
            <el-icon><search /></el-icon>
            <el-dropdown>
              <span class="el-dropdown-link">
                <el-icon><share /></el-icon>
                username
                <el-icon class="el-icon--right">
                  <arrow-down />
                </el-icon>
              </span>
              <template #dropdown>
                <el-dropdown-menu>
                  <el-dropdown-item>logout</el-dropdown-item>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-header>
        <el-main style="background-color: #edecec">
          <div
            style="
              background-color: white;
              width: 99%;
              height: 250px;
              border-radius: 5px;
              position: relative;
              left: 1%;
            "
          >
             <router-view></router-view>
            <p>标题</p>
            <div     style="
              background-color:	#DCDCDC;
              width: 100%;
              height: 1px;
             
              position: relative;
              
            "></div>
            <p>主体内容</p>
          </div>
        </el-main>
        <el-footer style="background-color: #edecec">build</el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import {
  Odometer,
  Grid,
  Help,
  Trophy,
  Collection,
  Search,
  Share,
  ArrowDown,
} from "@element-plus/icons-vue";
export default {
  components: {
    Odometer,
    Grid,
    Help,
    Trophy,
    Collection,
    Search,
    Share,
    ArrowDown,
  },
};
</script>
<style>
</style>


